Añadir fuentes de Google Font API al blog

Son muchos los que cuando ven una entrada con fuentes para descargar lo primero que preguntan es la forma de añadirlas al blog, no es posible hacerlo ya que son fuentes para utilizar con algún editor sin embargo  hace unos meses llegaron las fuentes de Google Font API una de las sorpresas menos esperadas y más gratificantes por parte de Google y que podemos ver en el directorio de Google Font .

JMiur nos explicaba de forma detallada los pasos a seguir para aplicar las fuentes a nuestro blog y nos descubría la posibilidad de previsualizar las fuentes de forma dinámica antes de tomar la decisión de añadirlas con Google Operating System.

Siguen llegando dudas sobre la forma de añadirlas al blog, la respuesta es que las añadimos con la propiedad font-family donde deseamos mostrarlas y ahí es dónde empieza el juego.

Nos situamos en plantilla justo antes de <b:skin>: y añadimos lo siguiente:

<link href=' http://fonts.googleapis.com/css?family=NOMBRE-DE-LA-FUENTE' rel='stylesheet' type='text/css'/>

Donde NOMBRE-DE-LA-FUENTE lo sustituimos por el nombre de fuente que escogimos en el directorio para el ejemplo escogí Tangerine así que añadimos el nombre en el código anterior y podemos guardar los cambios.

<link href=' http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'/>

Si nuestra fuente tiene espacios en el nombre sustituimos esos espacios con el signo + y si deseamos añadir más de una fuente las separamos con |

<link href=' http://fonts.googleapis.com/css?family=Tangerine|Droid+Sans' rel='stylesheet' type='text/css'/>

Ahora utilizaremos la propiedad font-family pero debemos saber dónde se encuentra esa fuente que deseamos cambiar. Seguimos con ejemplos siempre sobre una plantilla Minima.

Para el título del blog:

#header h1 {
font-family: 'Tangerine', century gothic, verdana;
......
}

Títulos de las entradas:

.post h3 {
font-family: 'Tangerine', century gothic, verdana;
......
}

Títulos de la sidebar:

.sidebar h2 {
font-family: 'Tangerine', century gothic, verdana;
......
}

Si tenemos columnas en el footer:

#col1 h2{
font-family: 'Tangerine', century gothic, verdana;
......
}

#col2 h2{
font-family: 'Tangerine', century gothic, verdana;
......
}

#col3 h2{
font-family: 'Tangerine', century gothic, verdana;
......
}

Desde ayer el diseñador de plantillas dispone de 40 nuevas fuentes así lo publica Blogger in draft y Oloman nos lo cuenta con todo detalle.